<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .router-link-active {
            background: red;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>开始学习路由啦</h1>
        <router-link to="/home" tag="button">去home页</router-link>
        <router-link to="/news" tag="button">去新闻页</router-link>
        <router-link to="/mine" tag="button">我的</router-link>
        <hr>
        <router-view></router-view>
    </div>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
    <script>
        let Home = {
            template: `
                <h1> home组件 </h1>
            `
        }
        let News = {
            template: `
                <h1> news组件 </h1>
            `
        }
        let Mine = {
            template: `
                <div>
                    <h1> 我的组件 </h1>
                    <button @click="logout">退出登录</button>
                </div>
            `,
            methods: {
                logout() {
                    localStorage.removeItem('token');
                    this.$router.go(0);
                }
            }
        }
        let Login = {
            template: `
                <button @click="login">登录</button>
            `,
            methods: {
                login() {
                    // 已经登录成功
                    // 'dwj793r45rfj9r3r'
                    localStorage.setItem("token", "4739diesjfeide");
                    localStorage.setItem("role", "editor")
                    this.$router.push("/home")
                }
            }
        }
        let NoAuth = {
            template: `
                <h1>你没有权限，请联系管理员配置相关权限</h1>
            `
        }
        const routes = [{
                path: "/",
                redirect: "/home"
            },
            {
                path: "/home",
                component: Home,
                meta: {
                    isNav:true,
                    roles: ['superAdmin', 'admin']
                }
            },
            {
                path: "/news",
                component: News,
                meta: {
                    isNav:true,
                    roles: ['superAdmin', 'admin', 'editor']
                }
            },
            {
                path: "/mine",
                component: Mine,
                meta: {
                    isNav:true,
                    roles: ['superAdmin']
                }
            },
            {
                path: "/noAuth",
                component: NoAuth,
                meta: {
                    roles: ['*']
                }
            },
            {
                path: "/login",
                component: Login,
                meta: {

                }
            }
        ];
        const router = new VueRouter({
            routes
        });
        console.log(router);
        router.beforeEach((to, from, next) => {
            //  登录
            if (to.fullPath === '/login') {
                next();
            } else {
                let token = localStorage.getItem("token");
                if (token) {
                    // 权限验证
                    console.log(to.meta.roles)
                    let role = localStorage.getItem("role");
                    if (to.fullPath === '/noAuth') {
                        next();
                    } else {
                        if (to.meta.roles.some(el => el === role)) {
                            next();
                        } else {
                            next("/noAuth");
                        }
                    }

                } else {
                    next("/login");
                }
            }
        })
        let vm = new Vue({
            el: "#app",
            router
        })
        /* 
         hash 模式
         根据 url hash值得变化 来 匹配不同的组件
         window.onhashchange
         */
    </script>
</body>

</html>